<template>

    <div class="container">
        <m-header>
            缴费
            <div class="h-btn" slot="r-slot">
                <van-button color="#24C373" size="small" v-prevent-re-click to="/paidList">已缴记录</van-button>
            </div>

        </m-header>

        <div class="main">
            <div class="box passenger-wrap">
                <div class="cell" v-for="item in fields">
                    <m-form :field="item" :value="value[item.field_id]" @change="onChange"></m-form>
                </div>
                <van-button class="btn" color="#24C373" v-prevent-re-click @click="searchRecord">查询</van-button>
            </div>
            <div class="list-wrap">
                <m-list :immediateCheck="false" :total="total" :cur-num="list.length" v-model="loading" @load="getDataList" :noneText="noneText" :load-end="loadEnd">
                    <div class="item-wrap" v-for="(item,index) in list" :key="index">
                        <div class="item-box">
                            <div class="item-top">
                                <span class="title">订单号：{{item.out_trade_no}}</span>
                            </div>
                            <ul class="item-mid">
                                <li>实收：<span class="price">￥{{item.cost}}</span></li>
                                <li>学校：{{item.school_name || ''}}</li>
                                <li>班别：{{item.class_ || ''}}</li>
                                <li>姓名：{{item.passengers_name || ''}}</li>
                                <li>考号：{{item.identification_no || ''}}</li>
                                <li>应收校车费：{{item.original_price || ''}}</li>
                                <li>套票标签名称：{{item.packag_label_name || ''}}</li>
                                <li>车费所属期：{{item.fare_period || ''}}</li>
                                <!--<li>订单创建时间：{{item.input_time}}</li>-->
                            </ul>
                            <div class="item-bot">
                                <van-button style="width: 100px;" color="#24C373" size="small" v-prevent-re-click @click="weUnifiedorder(item.row_id)">去支付</van-button>
                            </div>
                            <!--<div class="item-arrow">
                                <van-icon class="arrow" name="arrow" color="#202020" size="20"></van-icon>
                            </div>-->
                        </div>
                    </div>
                </m-list>
            </div>
        </div>
    </div>
</template>

<script>
  import form from '@/components/form/form'
  import list from '@/components/list/list';
  import {getAfterPayment, unifiedorder,afterPay} from "../../request/api";
  import {preventReClick} from "../../utils/plugins";
  import {setToken} from "../../utils/cache";
  export default {
    name: "payIndex",
    components:{
      mForm: form,
      mList: list,
    },
    data(){
      return {
        // 录入字段参数
        fields: [
          {
            label: '学生姓名',
            type: 'text',
            disabled: false,
            field_id: 'passengers_name',
          },
          {
            label: '学生考号',
            type: 'text',
            disabled: false,
            field_id: 'identification_no',
          },],
        value: {},
        list: [],
        total: 0,
        size: 10,
        no:1,
        loading: false,
        loadEnd: true,

        noneText: '请输入查询条件查询'
      }
    },
    methods:{
      getDataList(first){
        let {no,size,loadEnd,value} = this,  //当前请求页数
          list = [];
        no = first ? 1 : no;
        let param = {
          'page.no':no,
          'page.size': size,
          'is_pay_off': false,
          ...value
        }
        if (!value.passengers_name || !value.identification_no){
          this.$Toast('请输入查询');
          this.list = [];
          this.loadEnd = !loadEnd;
          return
        }
        getAfterPayment(param).then(res => {

          let {errcode ,row,total} = res;
          if (errcode !== 0)return;

          if (!first){list = this.list}
          list = [...list,...row];

          this.list = list;
          this.loadEnd = !loadEnd;
          this.no = ++no;
          this.total = total;
          this.noneText = '查无相关数据'
        })
      },

      onChange(e){
        let {field,val} = e,
          {field_id} = field;
        this.value = {...this.value,[field_id]: val};
        let {passengers_name,identification_no} = this.value
        if (!passengers_name || !identification_no) this.noneText = '请输入查询条件查询'

      },
      searchRecord(){
        this.loading = true;
        this.getDataList(true)
      },

    //  发起支付
      weUnifiedorder(id){
        return new Promise(resolve => {
          this.$Loading();
          afterPay({row_id:id}).then(res => {
            if (res.errcode !== 0)return;
            let data = res.row && res.row[0]

            /*/!*模拟测试*!/
            lockTicketTest(id).then(res=> {
              if (res.errcode !== 0) return
              this.$router.push({path: '/ticketDetail',query: {id}})
            })*/

            // 正式调起支付接口
            let onBridgeReady = ()=> {
              WeixinJSBridge.invoke(
                'getBrandWCPayRequest', {
                  "appId": data.appId,     //公众号名称，由商户传入
                  "timeStamp": data.timeStamp,         //时间戳，自1970年以来的秒数
                  "nonceStr": data.nonceStr, //随机串
                  "package": data.package,
                  "signType": data.signType,         //微信签名方式：
                  "paySign": data.paySign //微信签名
                },
                (res) => {
                  if (res.err_msg == "get_brand_wcpay_request:ok") {
                    // 使用以上方式判断前端返回,微信团队郑重提示：
                    //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                    this.$Toast('支付成功',() => {
                      this.$router.push({path: '/paidDetail',query: {id}})
                    });
                    this.getDataList(true)
                  }
                  else {
                    if (res.err_msg == "get_brand_wcpay_request:cancel") {
                      this.$Toast('取消支付',() => {

                      })
                    }else {

                      //  支付失败
                      this.$Toast('支付失败',() => {

                      })
                    }
                  }
                });

            }

            if (typeof WeixinJSBridge == "undefined") {
              if (document.addEventListener) {
                document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
              } else if (document.attachEvent) {
                document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
                document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
              }
            } else {
              onBridgeReady();
            }
          })
        })
      },
    },
    mounted(){
      let token = this.$route.query.token;
      if (token){
        setToken(token);
        let dir = process.env.NODE_ENV === 'development' ? process.env.VUE_APP_SECONDDIR : window.webConfig.webSecondDir
        location.replace(`${dir}payIndex`);
      }
    }
  }
</script>

<style scoped lang="less">
    .h-btn{
        padding-right: 10px;
    }
    .main{
        padding: 10px;
        display: flex;
        flex-direction: column;
        flex: 1;
        height: 0;
        .box{
            background: #fff;
            border-radius: 2px;
            margin-bottom: 10px;
            padding: 10px 15px ;
            .cell{
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size: 15px;
                height: 44px;
                border-bottom: 1px solid #dedede;
                .cell-right{
                    text-align: right;
                    flex: 1;
                    .cell-value{
                        text-align: right;
                    }
                }
            }
            .btn{
                width: 100%;
                margin-top: 10px;
            }
        }
        .list-wrap{
            flex: 1;
            height: 0;

            .item-wrap{
                padding: 0 10px;
                margin-bottom: 10px;
                & + .item-wrap{
                    margin-top: 10px;
                }
                .item-box{
                    background: #fff;
                    border-radius: 5px;
                    position: relative;
                    .item-top{
                        /*display: flex;*/
                        /*justify-content: space-between;*/
                        /*align-items: center;*/
                        padding: 12px 15px;
                        .title{
                            color: #2e2e2e;
                            font-weight: bold;
                            font-size: 15px;
                        }
                        .status{
                            font-size: 14px;
                            &.blue{
                                color: #1989fa;
                            }
                            &.green{
                                color: #24C373;
                            }
                            &.red{
                                color: #FF1313;
                            }
                            &.yellow{
                                color: #ffd11b;
                            }
                            &.orange{
                                color: #FF7913;
                            }
                            &.grey{
                                color: #B3B3B3;
                            }

                            &.syz,&.dsy,&.dzf{
                                color: #24C373;
                            }
                            &.ytp,&.gpsbtk{
                                color: #FF1313;
                            }
                            &.ysy{
                                color: #B3B3B3;
                            }
                            &.sqtpz{
                            }
                        }
                    }
                    .item-mid{
                        color: #2e2e2e;
                        font-size: 15px;
                        padding: 0 15px 10px;
                        line-height: 24px;
                        .price{
                            font-size: 20px;
                            font-weight: bold;
                            color: #000;

                        }
                    }
                    .item-bot{
                        border-top: 1px solid #dedede;
                        padding: 6px 15px;
                        height: 37px;
                        display: flex;
                        align-items: center;
                        font-size: 12px;
                        justify-content: center;
                    }
                    .item-arrow{
                        position: absolute;
                        top: calc((100% - 27px)/2);
                        transform: translateY(-50%);
                        right: 13px;
                    }
                }
            }

            .van-pull-refresh{
                height: 100%;
                overflow: auto;
            }
        }
    }
</style>
